<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>FusionCharts v3 Documentation</title>
		<link rel="stylesheet" href="Style.css" type="text/css" />
	</head>
	<body>
		<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
			<tr>
				<td><h2 class="pageHeader">Combining FusionCharts, ASP.NET  2.0 &amp; JavaScript (dataXML) 
						method
					</h2>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In our previous example, we had combined FusionCharts, 
						ASP.NET and JavaScript to create client side dynamic charts. We were updating 
						the chart by asking it to fetch new data from server and update itself, without 
						incurring any page refreshes.
					</p>
					<p>In this example, <strong>instead of asking the chart to get XML data </strong>from 
						server, <strong>we'll provide updated XML data to chart using JavaScript </strong>
						functions. The chart will simply accept that XML data and render.					</p>
					<p class="highlightBlock">This method can effectively be used in your AJAX 
						applications, where your JavaScript code gets the updated XML from server and 
						then provides it to charts locally. You can process the data received from AJAX 
						Calls, build XML from it and finally provide it to the chart.					</p>
					<p><strong>Before you proceed with the contents in this page, we strictly recommend you 
							to please go through the sections &quot;How FusionCharts works?&quot; and 
							&quot;Basic Examples&quot;, as we'll directly use a lot of concepts defined in 
							those sections.</strong></p>
					<p class="highlightBlock">The code discussed in this example is present in<span class="codeInline"> Download Package &gt; Code &gt; VB_NET &gt; DB_JS </span>folder.					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Defining the applicaton				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>We'll carry on from our previous example 
						and convert it to use JavaScript + XML, so that the new XML is provided to the 
						chart using JavaScript functions - the charts NO more directly request data 
						from server. To attain this, we send all the pertinent data from our server to 
						the end viewer as JavaScript arrays in the same page. The JavaScript arrays are 
						dynamically generated by ASP.NET pages at run-time and filled with data.
					</p>
					<p>Effectively, we will do the following:</p>
					<ol>
						<li>
							Contain both the pie chart (summary) and column chart (detailed) in one page (<span class="codeInline">Default.aspx</span>).</li>
						<li>
							When the page loads, the pie chart would use
							<span class="codeInline">dataXML</span>
							method to show summary of all factories. This data will be built in
							<span class="codeInline">Default.aspx</span>
							itself.						</li>
						<li>
							There will be a JavaScript array named as
							<span class="codeInline">data</span>
							in this page. This array will contain detailed data for the factories. The 
							array will be dynamically built using ASP.NET and then outputted as JavaScript 
							code.						</li>
						<li>
							Apart from the data in JavaScript, we'll also have a local JavaScript function
							<span class="codeInline">updateChart()</span>, which would process the data in 
							this array and convert it to XML data document, for direct usage by the column 
							chart.						</li>
						<li>
							The column chart would initialize with no data, as the user has not selected a 
							factory initially. We'll customize the &quot;<span class="codeInline">No data to display</span>&quot; 
							message of the chart to show a friendly message.</li>
						<li>
							The pie chart would have JavaScript links defined for each pie slice. This 
							JavaScript links refer to
							<span class="codeInline">updateChart()</span>
							JavaScript function present on the same page. We'll later see how to hand code 
							this function. When a pie is clicked, the
							<span class="codeInline">factory ID </span>is passed to this function.						</li>
						<li>
							The
							<span class="codeInline">  updateChart()</span>
							function is responsible for updating the column chart. It generates the XML 
							data from data stored in JavaScript
							<span class="codeInline">data</span>
							array and conveys it to the column chart.</li>
						<li>
							The column chart would now accept this XML data, parse it and finally render.</li>
					</ol>				</td>
			</tr>
			<tr>
				<td valign="top" class="text">&nbsp;</td>
			</tr>
			<tr>
				<td valign="top" class="header">Creating the page - Default.aspx				</td>
			</tr>
			<tr>
				<td valign="top" class="text">Both the charts and JavaScript functions to 
					manipulate the charts is contained in
					<span class="codeInline">Default.aspx</span>. It has the following code:				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock"><p>
						&lt;%@ Page Language=&quot;VB&quot; AutoEventWireup=&quot;false&quot; CodeFile=&quot;Default.aspx.vb&quot; Inherits=&quot;DB_JS_Default&quot; %&gt;<br>
						&lt;HTML&gt;<br>
						&nbsp;&lt;HEAD&gt;<br>
						&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Database + JavaScript Example 
						&lt;/TITLE&gt;<br>
						&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="Javascript" 
						SRC="../FusionCharts/FusionCharts.js"&gt;<br>
						&nbsp;&nbsp;&lt;/SCRIPT&gt;<br>
						&nbsp;&nbsp;&lt;SCRIPT LANGUAGE="JavaScript"&gt;<br>
						&nbsp;<span class="codeComment">&nbsp;//Here, we use a mix of server side script (VB.NET) and JavaScript to<br>
&nbsp;&nbsp;//render our data for factory chart in JavaScript variables. We'll 
						later<br>
&nbsp;&nbsp;//utilize this data to dynamically plot charts.<br>
						<br>
&nbsp;&nbsp;//All our data is stored in the data array. From VB.NET, we iterate 
						through<br>
&nbsp;&nbsp;//each recordset of data and then store it as nested arrays in this 
						data array.</span><br>
						&nbsp;&nbsp;var data = new Array();<br>
						&nbsp;<span class="codeComment">&nbsp;//Write the data as JavaScript variables here</span><br>
						&nbsp;&nbsp;<strong>&lt;%=GetScript()%&gt;</strong><br>
						<br>
						&nbsp;&nbsp;<span class="codeComment">//The data is now present as arrays in JavaScript. Local JavaScript 
						functions<br>
&nbsp;&nbsp;//can access it and make use of it. We'll see how to make use of 
						it.<br>
						<br>
						<br>
&nbsp;&nbsp;/** <br>
&nbsp;&nbsp; * updateChart method is invoked when the user clicks on a pie 
						slice.<br>
&nbsp;&nbsp; * In this method, we get the index of the factory, build the XML 
						data<br>
&nbsp;&nbsp; * for that that factory, using data stored in data array, and 
						finally<br>
&nbsp;&nbsp; * update the Column Chart.<br>
&nbsp;&nbsp; * @param factoryIndex Sequential Index of the factory.<br>
&nbsp;&nbsp;*/ </span><br>
						&nbsp;&nbsp;function updateChart(factoryIndex){<br>
						&nbsp;&nbsp;<span class="codeComment">&nbsp;//Storage for XML data document</span><br>
						&nbsp;&nbsp;&nbsp;var strXML = "&lt;chart palette='2' caption='Factory " + 
						factoryIndex + " Output ' subcaption='(In Units)' xAxisName='Date' 
						showValues='1' labelStep='2' &gt;";<br>
						<br>
						&nbsp;&nbsp;&nbsp;<span class="codeComment">//Add &lt;set&gt; elements</span><br>
						&nbsp;&nbsp;&nbsp;var i=0;<br>
						&nbsp;&nbsp;&nbsp;for (i=0; i&lt;data[factoryIndex].length; i++){<br>
						&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='" + 
						data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' /&gt;";<br>
						&nbsp;&nbsp;&nbsp;}<br>
						<br>
						&nbsp;&nbsp;&nbsp;<span class="codeComment">//Closing Chart Element</span><br>
						&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;/chart&gt;";<br>
						<br>
						&nbsp;&nbsp;&nbsp;<span class="codeComment">//Get reference to chart object using Dom ID 
						"FactoryDetailed"</span><br>
						&nbsp;&nbsp;&nbsp;var chartObj = getChartFromId("FactoryDetailed");<br>
						&nbsp;&nbsp;<span class="codeComment">&nbsp;//Update it's XML</span><br>
						&nbsp;&nbsp;&nbsp;chartObj.setDataXML(strXML);<br>
						&nbsp;&nbsp;}<br>
						&nbsp;&nbsp;&lt;/SCRIPT&gt;
						&nbsp;&nbsp;<br>
						&nbsp;&lt;/HEAD&gt;<br>
						&nbsp;&lt;body&gt;<br />						
						&nbsp;&nbsp; &lt;form id='form1' name='form1' method='post' runat=&quot;server&quot;&gt;<br>
						&nbsp;&nbsp;&nbsp;<strong>&nbsp;&nbsp;&lt;%=GetFactorySummayChartHtml()%&gt;</strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;BR&gt;<br />
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=GetFactoryDetailedChartHtml()%&gt;<br />
</strong>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;<br>
						&nbsp;&lt;/body&gt;<br>
						&lt;/HTML&gt;<br>
						<br>
						</p>
				  <p><strong><u>Code in code behind page:</u></strong> <br />
				      <span class="codeComment"> 'In this example, we show a combination of database + JavaScript 
						rendering using FusionCharts.<br />
					  'The entire app (page) can be summarized as under. This app shows the 
						break-down<br />
'of factory wise output generated. In a pie chart, we first show the sum 
						of quantity<br />
'generated by each factory. These pie slices, when clicked would show 
						detailed date-wise<br />
'output of that factory.<br />
'The XML data for the pie chart is fully created in ASP.NET at run-time. 
						ASP.NET interacts<br />
'with the database and creates the XML for this.<br />
'Now, for the column chart (date-wise output report), we do not submit 
						request to the server.<br />
'Instead we store the data for the factories in JavaScript arrays. These 
						JavaScript<br />
'arrays are rendered by our ASP.NET Code (at run-time). We also have a 
						few defined JavaScript<br />
'functions which react to the click event of pie slice.<br />
'We've used an Access database which is present in ../DB/FactoryDB.mdb. <br />
'It just contains two tables, which are linked to each other. <br />
'Before the page is rendered, we need to connect to the database and get 
						the<br />
'data, as we'll need to convert this data into JavaScript variables.</span><br>
                    <strong>Public Function GetScript() As String</strong><br />
                    <span class="codeComment">&nbsp;&nbsp; 'String to store JavaScript variables<br />
                    </span><span class="codeComment">&nbsp;&nbsp; </span>Dim jsVarString As New StringBuilder()</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Generate SQL querystring to get all factory Ids<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>Dim factoryQuery As String = &quot;select FactoryId from Factory_Master&quot;<br />
				    <span class="codeComment">&nbsp;&nbsp; 'Sets JavaScript Array Index<br />
			        </span><span class="codeComment">&nbsp;&nbsp; </span>Dim indexCount As Integer = 0</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Create a table to store factoryIds<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>Dim oRs As New DbConn(factoryQuery)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Iterate through each record <br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>While oRs.ReadData.Read()</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; </span>indexCount = indexCount + 1</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; 'Build JavaScript : Create a new JavaScript Array <br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>jsVarString.Append(&quot;&quot; &amp; vbTab &amp; vbTab &amp; &quot; data[&quot; &amp; indexCount.ToString() &amp; &quot;] = new Array();&quot; &amp; Environment.NewLine)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; 'Create an SQL Query for the current FactoryId<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>Dim outputQuery As String = &quot;select DatePro, Quantity from Factory_Output where FactoryId=&quot; &amp; oRs.ReadData(&quot;FactoryId&quot;).ToString &amp; &quot; order by DatePro Asc&quot;</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; 'Create a table storing detailed Factory Data <br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>Dim oRs1 As New DbConn(outputQuery)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; 'Iterate Through records<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>While oRs1.ReadData.Read()<br />
				    <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 'Build JavaScript : Push Factory Data into JavaScript Array<br />
				    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 'Convert date into specific dd/MM format<br />
			        </span><span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>jsVarString.Append(&quot;&quot; &amp; vbTab &amp; vbTab &amp; &quot; data[&quot; &amp; indexCount.ToString &amp; &quot;].push(new Array('&quot; &amp; Convert.ToDateTime(oRs1.ReadData(&quot;DatePro&quot;)).ToString(&quot;dd/MM&quot;) &amp; &quot;',&quot; &amp; oRs1.ReadData(&quot;Quantity&quot;).ToString &amp; &quot;));&quot; &amp; Environment.NewLine)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; </span>End While<br />
				    <span class="codeComment">&nbsp;&nbsp; </span><br />
				    <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; </span>oRs1.ReadData.Close()</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; </span>End While<br />
				    <span class="codeComment">&nbsp;&nbsp; </span>oRs.ReadData.Close()</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Returns JavaScript variables<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>Return jsVarString.ToString()<br />
				    <strong>End Function</strong></p>
				  <p>				        <br>
						<strong>Public Function GetFactorySummayChartHtml() As String</strong><br>
				    <span class="codeComment"><br>
&nbsp;</span><span class="codeComment"><br />
 &nbsp;&nbsp; 'Initialize the Pie chart with sum of production for each of the 
						factories<br>
&nbsp;&nbsp; 'xmlData will be used to store the entire XML document generated</span><br>
<span class="codeComment">&nbsp;&nbsp; </span>Dim xmlData As New StringBuilder()<br />
&nbsp;&nbsp; <br />
<span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">'Generate the chart element</span><br />
<span class="codeComment">&nbsp;&nbsp; </span>xmlData.Append(&quot;&lt;chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units'&gt;&quot;)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'create recordset to get details for the factories</span><br />
				    <span class="codeComment">&nbsp;&nbsp; </span>Dim factoryQuery As String = &quot;select a.FactoryId, a.FactoryName, sum(b.Quantity) as TotQ from .Factory_Master a, Factory_Output b where a.FactoryId=b.FactoryID group by a.FactoryId, a.FactoryName&quot;<br />
			        <span class="codeComment">&nbsp;&nbsp; </span>Dim oRs As New DbConn(factoryQuery)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Iterate through each record<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>While oRs.ReadData.Read()<br />
				    <span class="codeComment">&nbsp;&nbsp; &nbsp;&nbsp; 'Generate &lt;set name='..' value='..' link='...'/&gt; <br />
				    &nbsp;&nbsp; &nbsp;&nbsp; 'The link causes drill-down by calling (here) a JavaScript function<br />
				    &nbsp;&nbsp; &nbsp;&nbsp; 'The function is passed the Factory id<br />
				    &nbsp;&nbsp; &nbsp;&nbsp; 'The function updates the second chart<br />
				    </span><span class="codeComment">&nbsp;&nbsp; </span><span class="codeComment">&nbsp;&nbsp; </span>xmlData.Append(&quot;&lt;set label='&quot; &amp; oRs.ReadData(&quot;FactoryName&quot;).ToString() &amp; &quot;' value='&quot; &amp; oRs.ReadData(&quot;TotQ&quot;).ToString &amp; &quot;'link='JavaScript:updateChart(&quot; &amp; oRs.ReadData(&quot;FactoryId&quot;).ToString() &amp; &quot;)' /&gt;&quot;)<br />
				    <span class="codeComment">&nbsp;&nbsp; </span>End While<br />
				    <br />
			        <span class="codeComment">&nbsp;&nbsp; </span>oRs.ReadData.Close()</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Close chart element<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>xmlData.Append(&quot;&lt;/chart&gt;&quot;)</p>
				  <p> <span class="codeComment">&nbsp;&nbsp; 'Create the chart - Pie 3D Chart with data from xmlData<br />
			      </span><span class="codeComment">&nbsp;&nbsp; </span>Return FusionCharts.RenderChart(&quot;../FusionCharts/Pie3D.swf&quot;, &quot;&quot;, xmlData.ToString(), &quot;FactorySum&quot;, &quot;500&quot;, &quot;250&quot;, False, True)<br />
			      <br>
			      <strong>End Function</strong><br />
					<br />
					<strong>Public Function GetFactoryDetailedChartHtml() As String </strong><br />
                    <span class="codeComment">&nbsp;&nbsp; 'Column 2D Chart with changed &quot;No data to display&quot; message <br />
                   &nbsp;&nbsp; 'We initialize the chart with &lt;chart&gt;&lt;/chart&gt;         Return<br />
                    &nbsp;&nbsp;&nbsp; </span><strong>FusionCharts.RenderChart(&quot;../FusionCharts/Column2D.swf?ChartNoDataText=Please select a factory from pie chart above to view &quot; &amp; &quot;detailed data.&quot;, &quot;&quot;, &quot;&lt;chart&gt;&lt;/chart&gt;&quot;, &quot;FactoryDetailed&quot;, &quot;600&quot;, &quot;250&quot;, False, True)<br />
                   <br />
 </strong>End Function<br />
						<br />
				  </p>			  </td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>In this page, before rendering any HTML code, we first 
						generate all the data in database as JavaScript array. To do so, we use string 
						concatenation in ASP.NET variables to store all data as JavaScript array code. 
						Once the JavaScript code is built in our ASP.NET variable, we write it out in 
						the
						<span class="codeInline">&lt;SCRIPT&gt;</span>
						section of HTML
						<span class="codeInline">&lt;HEAD&gt;</span>.
					</p>
					<p class="codeInline">&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
						&nbsp;&nbsp;var data = new Array();<br />
						&nbsp;&nbsp;&lt;%<br />
						<strong>&nbsp;&nbsp;&lt;%=GetScript()%&gt;</strong><br />
						&nbsp;&nbsp;%&gt;<br />
						&lt;/SCRIPT&gt;</p>
					<p>If you run this page and view the source JavaScript code, you'll see the 
						following:					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock">var data = new Array();<br />
					<br />
					data[1] = new Array();<br />
					data[1].push(new Array('1/1',21));<br />
					data[1].push(new Array('2/1',23));<br />
					data[1].push(new Array('3/1',22));<br />
					data[1].push(new Array('4/1',24));<br />
					data[1].push(new Array('5/1',32));<br />
					data[1].push(new Array('6/1',21));<br />
					data[1].push(new Array('7/1',34));<br />
					data[1].push(new Array('8/1',32));<br />
					data[1].push(new Array('9/1',32));<br />
					data[1].push(new Array('10/1',23));<br />
					data[1].push(new Array('11/1',23));<br />
					data[1].push(new Array('12/1',32));<br />
					data[1].push(new Array('13/1',53));<br />
					data[1].push(new Array('14/1',23));<br />
					data[1].push(new Array('15/1',26));<br />
					data[1].push(new Array('16/1',43));<br />
					data[1].push(new Array('17/1',16));<br />
					data[1].push(new Array('18/1',45));<br />
					data[1].push(new Array('19/1',65));<br />
					data[1].push(new Array('20/1',54));<br />
					data[2] = new Array();<br />
					data[2].push(new Array('1/1',121));<br />
					data[2].push(new Array('2/1',123));<br />
					data[2].push(new Array('3/1',122));<br />
					data[2].push(new Array('4/1',124));<br />
					data[2].push(new Array('5/1',132));<br />
					data[2].push(new Array('6/1',121));<br />
					data[2].push(new Array('7/1',134));<br />
					data[2].push(new Array('8/1',132));<br />
					data[2].push(new Array('9/1',132));<br />
					data[2].push(new Array('10/1',123));<br />
					data[2].push(new Array('11/1',123));<br />
					data[2].push(new Array('12/1',132));<br />
					data[2].push(new Array('13/1',153));<br />
					data[2].push(new Array('14/1',123));<br />
					data[2].push(new Array('15/1',126));<br />
					data[2].push(new Array('16/1',143));<br />
					data[2].push(new Array('17/1',116));<br />
					data[2].push(new Array('18/1',145));<br />
					data[2].push(new Array('19/1',165));<br />
					data[2].push(new Array('20/1',154));<br />
					data[3] = new Array();<br />
					data[3].push(new Array('1/1',54));<br />
					data[3].push(new Array('2/1',56));<br />
					data[3].push(new Array('3/1',89));<br />
					data[3].push(new Array('4/1',56));<br />
					data[3].push(new Array('5/1',98));<br />
					data[3].push(new Array('6/1',76));<br />
					data[3].push(new Array('7/1',65));<br />
					data[3].push(new Array('8/1',45));<br />
					data[3].push(new Array('9/1',75));<br />
					data[3].push(new Array('10/1',54));<br />
					data[3].push(new Array('11/1',75));<br />
					data[3].push(new Array('12/1',76));<br />
					data[3].push(new Array('13/1',34));<br />
					data[3].push(new Array('14/1',97));<br />
					data[3].push(new Array('15/1',55));<br />
					data[3].push(new Array('16/1',43));<br />
					data[3].push(new Array('17/1',16));<br />
					data[3].push(new Array('18/1',35));<br />
					data[3].push(new Array('19/1',78));<br />
					data[3].push(new Array('20/1',75));</td>
			</tr>
			<tr>
			  <td valign="top" class="text">&nbsp;</td>
		  </tr>
			<tr>
				<td valign="top" class="text"><p>You can clearly see that our ASP.NET code has 
						outputted JavaScript code that can now locally create an array and feed it with 
						requisite data.
					</p>
					<p>Now, before we get to the JavaScript functions, let's first see what we're doing 
						in our ASP.NET Code.					</p>
					<p>We first create the XML data document for Pie chart - summary of factory output. 
						For each
						<span class="codeInline">&lt;set&gt;</span>, we provide a JavaScript link to 
						the
						<span class="codeInline">updateChart()</span>
						function and pass the factory ID to it as shown in the line below:</p>
				  <p class="codeInline"> xmlData.Append(&quot;&lt;set label='&quot; &amp; oRs.ReadData(&quot;FactoryName&quot;).ToString() &amp; &quot;' value='&quot; &amp; oRs.ReadData(&quot;TotQ&quot;).ToString &amp; &quot;'link='JavaScript:updateChart(&quot; &amp; oRs.ReadData(&quot;FactoryId&quot;).ToString() &amp; &quot;)' /&gt;&quot;)<br>
					        <br />
			                <span class="text">We now render the Pie 3D chart using </span>dataXML<span class="text"> method. The Pie 3D chart has its 
				DOM Id as
				</span>FactorySum<span class="text">:</span></p>
					<p class="codeInline">FusionCharts.RenderChart(&quot;../FusionCharts/Pie3D.swf&quot;, 
						&quot;&quot;, <strong>xmlData</strong>, &quot;<strong>FactorySum</strong>&quot;, 
						500, 250, false, false)</p>
					<p>Now, we render an empty Column 2D chart with
						<span class="codeInline">&lt;chart&gt;&lt;/chart&gt;</span>
						data initially. We also change the &quot;<span class="codeInline">No data to display.</span>&quot; 
						error to a friendly and intuitive &quot;<span class="codeInline">Please select a factory from pie chart above to view detailed data.</span>&quot; 
						This chart has its DOM Id as
						<span class="codeInline">FactoryDetailed</span>.</p>
					<p><span class="codeInline">FusionCharts.RenderChart(&quot;../FusionCharts/Column2D.swf?<strong>ChartNoDataText=Please 
								select a factory from pie chart above to view detailed data.</strong>&quot;, &quot;&quot;, &quot;<strong>&lt;chart&gt;&lt;/chart&gt;</strong>&quot;, &quot;<strong>FactoryDetailed</strong>&quot;, 600, 250, false, false)</span></p>
					<p>Effectively, our page is now set to show two charts. The pie chart shows the 
						summary data provided to it using dataXML method. The column chart shows the 
						above &quot;friendly&quot; error message. Now, when each pie slice is clicked, 
						the
						<span class="codeInline">updateChart()</span>
						JavaScript function is called and the
						<span class="codeInline">factoryID</span>
						of the pie is passed to it. This function is responsible for updating the 
						column chart and contains the following code:					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="codeBlock">function updateChart(factoryIndex){<br />
					&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;//Storage for XML data document</span><br />
					&nbsp;&nbsp;&nbsp;&nbsp;var strXML = &quot;&lt;chart palette='2' 
					caption='Factory &quot; + factoryIndex + &quot; Output ' subcaption='(In 
					Units)' xAxisName='Date' showValues='1' labelStep='2' &gt;&quot;;<br />
					<br />
					<span class="codeComment">&nbsp;&nbsp;&nbsp;//Add &lt;set&gt; elements</span><br />
					&nbsp;&nbsp;&nbsp;var i=0;<br />
					&nbsp;&nbsp;&nbsp;for (i=0; i&lt;data[factoryIndex].length; i++){<br />
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;set 
					label='&quot; + data[factoryIndex][i][0] + &quot;' value='&quot; + 
					data[factoryIndex][i][1] + &quot;' /&gt;&quot;;<br />
					&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;<br />
					<br />
					&nbsp;&nbsp;<span class="codeComment">&nbsp;//Closing Chart Element</span><br />
					&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;/chart&gt;&quot;;<br />
					<br />
					<span class="codeComment">&nbsp;&nbsp;&nbsp;//Get reference to chart object using Dom ID &quot;FactoryDetailed&quot;</span><br />
					&nbsp;&nbsp;&nbsp;var chartObj = getChartFromId(&quot;FactoryDetailed&quot;);<br />
					<span class="codeComment">&nbsp;&nbsp;&nbsp;//Update it's XML</span><br />
					&nbsp;&nbsp;&nbsp;chartObj.setDataXML(strXML);<br />
					}</td>
			</tr>
			<tr>
				<td valign="top" class="text"><p>Here,
					</p>
					<ol>
						<li>
							We first create the XML data document for the column chart by iterating through 
							data contained in our JavaScript
							<span class="codeInline">data</span>
							array.						</li>
						<li>
							Thereafter, we convery this XML data to the column chart. To do so, we first 
							get a reference to the column chart using it's DOM Id
							<span class="codeInline">FactoryDetailed</span>. We use the
							<span class="codeInline">getChartFromId</span>() function defined in
							<span class="codeInline">FusionCharts.js</span>
							to do so.						</li>
						<li>
							Once we've the reference to the chart, we simply call the
							<span class="codeInline">setDataXML</span>
							method of the chart and pass it the XML data document.						</li>
						<li>
							This updates the chart with new data.						</li>
					</ol>
					    
					<p>When you now see the application, the initial state would look as under:					</p>				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_JS_URL_Ini.jpg" width="511" height="458" class="imageBorder" /></td>
			</tr>
			<tr>
				<td valign="top" class="text">And when you click on a pie slice, the following 
					would appear on the same page (without involving any browser refreshes):				</td>
			</tr>
			<tr>
				<td valign="top" class="text"><img src="Images/Code_JS_URL_Fin.jpg" width="610" height="526" /></td>
			</tr>
			<tr>
				<td valign="top" class="text">This example demonstrated a very basic sample of the 
					integration capabilities possible with FusionCharts v3. For advanced demos, you 
					can see and download our FusionCharts Blueprint/Demo Applications.				</td>
			</tr>
		</table>
	</body>
</html>
